<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
    <script type="text/javascript" src="/WebProject/javascript/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="/WebProject/javascript/jquery-ui.js"></script>
	<link rel="stylesheet" type="text/css" href="/WebProject/css/jquery-ui.css">
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
	 .sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
	 .sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
	 .sortable li span { position: absolute; margin-left: -1.3em; }
	</style>
  </head>
  
<body>
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
  FB.init({
    appId      : '571559746210080',
    status     : true, // check login status
    cookie     : true, // enable cookies to allow the server to access the session
    xfbml      : true  // parse XFBML
  });

  // Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired
  // for any authentication related change, such as login, logout or session refresh. This means that
  // whenever someone who was previously logged out tries to log in again, the correct case below 
  // will be handled. 
  FB.Event.subscribe('auth.authResponseChange', function(response) {
    // Here we specify what we do with the response anytime this event occurs. 
    if (response.status === 'connected') {
      // The response object is returned with a status field that lets the app know the current
      // login status of the person. In this case, we're handling the situation where they 
      // have logged in to the app.
      testAPI();
    } else if (response.status === 'not_authorized') {
      // In this case, the person is logged into Facebook, but not into the app, so we call
      // FB.login() to prompt them to do so. 
      // In real-life usage, you wouldn't want to immediately prompt someone to login 
      // like this, for two reasons:
      // (1) JavaScript created popup windows are blocked by most browsers unless they 
      // result from direct interaction from people using the app (such as a mouse click)
      // (2) it is a bad experience to be continually prompted to login upon page load.
      FB.login();
    } else {
      // In this case, the person is not logged into Facebook, so we call the login() 
      // function to prompt them to do so. Note that at this stage there is no indication
      // of whether they are logged into the app. If they aren't then they'll see the Login
      // dialog right after they log in to Facebook. 
      // The same caveats as above apply to the FB.login() call here.
      FB.login();
    }
  });
  };

  // Load the SDK asynchronously
  (function(d){
   var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
   if (d.getElementById(id)) {return;}
   js = d.createElement('script'); js.id = id; js.async = true;
   js.src = "/WebProject/javascript/all.js";
   ref.parentNode.insertBefore(js, ref);
  }(document));
var ashu = new Object();
  // Here we run a very simple test of the Graph API after login is successful. 
  // This testAPI() function is only called in those cases. 
  function testAPI() {
	    console.log('Welcome!  Fetching your information.... ');
	    FB.api('/me', function(response) {
	      console.log('Good to see you, ' + response.name + '.');
		  jQuery("#friend-droppable").append("<li id='sortable_"+response.id+"' class='ui-state-default'><span class='ui-icon ui-icon-arrowthick-2-n-s sortable'></span>"+response.name+"</li>");

	      /* make the API call */
	      FB.api(
	          '/me/friends',
	          function (response) {
	            if (response && !response.error) {
	            	listAll(response.data);
	            }else{
	            	console.log("Error in getting friend list --> "+response);
	            }
	          }
	      );
	    });
  }
  function listAll(friendList){
	  var frCont = friendList.length;
	  while(frCont>0){
		  frCont--;
		  jQuery("#friend-container").append("<li id='sortable_"+friendList[frCont].id+"' class='ui-state-default'><span class='ui-icon ui-icon-arrowthick-2-n-s sortable'></span>"+friendList[frCont].name+"</li>");
	  }
	  jQuery( "div[id^='sortable_']" ).sortable();
	  jQuery( "div[id^='sortable_']" ).disableSelection();

  }
</script>

<!--
  Below we include the Login Button social plugin. This button uses the JavaScript SDK to
  present a graphical Login button that triggers the FB.login() function when clicked. -->
<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
<ul id="friend-container" class="sortable"></ul>
<ul id="friend-droppable" class="sortable"></ul>
<iframe src="//www.facebook.com/plugins/follow?href=https%3A%2F%2Fwww.facebook.com%2Fashutosh.verma.65&amp;layout=standard&amp;show_faces=true&amp;colorscheme=light&amp;width=450&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
</body>
</html>
